ExtJS অ্যাপ্লিকেশন ডিরেক্টরি স্ট্রাকচার অত্যন্ত সংগঠিত এবং মডুলার, যা সহজে পরিচালনা এবং রক্ষণাবেক্ষণযোগ্য। এই কাঠামো ডেভেলপারদের তাদের অ্যাপ্লিকেশনের বিভিন্ন অংশ (যেমন: মডেল, ভিউ, কন্ট্রোলার) আলাদা করার অনুমতি দেয়।
প্রধান ডিরেক্টরি এবং ফাইলসমূহ
নিচে ExtJS প্রজেক্ট ফোল্ডারের সাধারণ কাঠামো এবং এর প্রতিটি ডিরেক্টরি বা ফাইলের ব্যাখ্যা দেওয়া হলো:
/myapp
├── app/
│ ├── model/
│ ├── view/
│ ├── controller/
│ ├── store/
│ └── Application.js
├── resources/
│ ├── images/
│ └── css/
├── build/
├── ext/
├── index.html
├── app.js
└── classic/modern/
মূল ডিরেক্টরিগুলোর ব্যাখ্যা
/app/
app/ ডিরেক্টরি হলো অ্যাপ্লিকেশনের প্রধান কোডবেস। এখানে MVC (Model-View-Controller) প্যাটার্ন অনুযায়ী অ্যাপ্লিকেশনের ফাইলগুলো সংরক্ষণ করা হয়।
/model/:
মডেল সংক্রান্ত ফাইল এখানে রাখা হয়। মডেল ডেটার কাঠামো এবং বৈশিষ্ট্য সংজ্ঞায়িত করে।
উদাহরণ:Ext.define('MyApp.model.User', { extend: 'Ext.data.Model', fields: ['id', 'name', 'email'] });/view/:
অ্যাপ্লিকেশনের UI (User Interface) সম্পর্কিত ফাইল এখানে থাকে।
উদাহরণ: গ্রিড, ফর্ম, বা প্যানেল তৈরি করার জন্য ফাইল।Ext.define('MyApp.view.Main', { extend: 'Ext.panel.Panel', title: 'Main Panel', html: 'Welcome to ExtJS!' });/controller/:
অ্যাপ্লিকেশনের লজিক এবং ইভেন্ট হ্যান্ডলিংয়ের জন্য কন্ট্রোলার ফাইল থাকে।
উদাহরণ:Ext.define('MyApp.controller.Main', { extend: 'Ext.app.Controller', init: function() { console.log('Controller Initialized'); } });/store/:
ডেটা সংগ্রহ এবং ম্যানেজ করার জন্য স্টোর সংক্রান্ত ফাইল এখানে থাকে।
উদাহরণ:Ext.define('MyApp.store.Users', { extend: 'Ext.data.Store', model: 'MyApp.model.User', autoLoad: true });Application.js:
অ্যাপ্লিকেশনের এন্ট্রি পয়েন্ট যেখানে প্রধান কনফিগারেশন থাকে।
/resources/
অ্যাপ্লিকেশনের স্ট্যাটিক সম্পদ (static assets) যেমন CSS, ইমেজ, এবং থিম ফাইল এখানে থাকে।
/images/:
অ্যাপ্লিকেশনের জন্য প্রয়োজনীয় ইমেজ ফাইল।/css/:
কাস্টম স্টাইলশিট এবং থিমিং ফাইল।
/build/
ডেভেলপমেন্ট বা প্রোডাকশনের জন্য বিল্ড ফাইল এখানে তৈরি হয়।
/production/: প্রোডাকশন পরিবেশের জন্য অপ্টিমাইজড ফাইল।/development/: ডেভেলপমেন্ট পর্যায়ের ফাইল।
/ext/
ExtJS SDK এর সকল ফাইল এখানে থাকে। এটি sencha app generate কমান্ড ব্যবহার করলে স্বয়ংক্রিয়ভাবে যোগ হয়।
index.html
অ্যাপ্লিকেশনের মূল HTML ফাইল। এটি ব্রাউজারে অ্যাপ্লিকেশন চালু করার জন্য এন্ট্রি পয়েন্ট।
<!DOCTYPE html>
<html>
<head>
<title>MyApp</title>
<script type="text/javascript" src="ext/build/ext-all.js"></script>
<script type="text/javascript" src="app.js"></script>
</head>
<body></body>
</html>
app.js
app.js অ্যাপ্লিকেশনের প্রধান জাভাস্ক্রিপ্ট ফাইল। এটি ExtJS অ্যাপ্লিকেশন শুরু করার জন্য ব্যবহৃত হয়।
Ext.application({
name: 'MyApp',
launch: function() {
Ext.create('MyApp.view.Main', {
renderTo: Ext.getBody()
});
}
});
/classic/modern/
ExtJS ৬.০ এবং পরবর্তী সংস্করণে ক্লাসিক (ডেস্কটপ) এবং মডার্ন (মোবাইল) ভিউ আলাদা করার জন্য ব্যবহার করা হয়।
/classic/: ক্লাসিক থিম এবং ডেস্কটপ ফিচারের জন্য।/modern/: মডার্ন থিম এবং মোবাইল ফিচারের জন্য।
ফাইল স্ট্রাকচারের সুবিধা
- মডুলার কোডবেস: কোড পড়া এবং রক্ষণাবেক্ষণ সহজ হয়।
- বিভাজিত লজিক: মডেল, ভিউ, কন্ট্রোলার আলাদাভাবে সংরক্ষিত থাকে।
- থিম এবং স্টাইল ম্যানেজমেন্ট:
resources/ডিরেক্টরির মাধ্যমে থিমিং সহজ। - বিল্ড প্রসেস সহজ: প্রোডাকশন এবং ডেভেলপমেন্ট আলাদাভাবে ম্যানেজ করা যায়।
ExtJS এর ফাইল স্ট্রাকচার একটি শক্তিশালী এবং কার্যকর পদ্ধতি, যা বড় এবং জটিল অ্যাপ্লিকেশন তৈরি ও পরিচালনা করতে সহায়তা করে।
Read more
